<template>
  <div class="cate">
    <div class="title">分类</div>
    <div style="padding: 10px">
      <el-input v-model="filterText" placeholder="请输入分类名称"></el-input>
      <el-button
        style="width: 100%; margin-top: 10px"
        type="primary"
        @click="handleEdit({})"
      >
        <el-icon>
          <Plus />
        </el-icon>
        添加分类
      </el-button>
    </div>
    <el-table
      class="cateTable"
      ref="singleTableRef"
      v-loading="loading"
      element-loading-text="加载中..."
      :data="cateList"
      height="100%"
      @row-click="rowClick"
      :highlight-current-row="true"
    >
      <el-table-column prop="categoryId" label="分类ID" />
      <el-table-column prop="categoryName" label="分类名称" />
      <el-table-column
        prop="statusName"
        label="全部分类"
        width="85"
        align="center"
      >
        <template #header>
          <el-link :underline="false" type="primary" @click="setCurrent()">{{
            '全部分类'
          }}</el-link>
        </template>
        <template #default="scope">
          <el-dropdown>
            <el-icon style="cursor: pointer" :size="20">
              <Tools />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleEdit(scope.row)">{{
                  '编辑分类'
                }}</el-dropdown-item>
                <el-dropdown-item @click="handleDel(scope.row)">{{
                  '删除分类'
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
      <slot></slot>
    </el-table>
    <BaseDialog
      :title="(!ruleForm.categoryId ? '新增' : '编辑') + '分类'"
      :handleCancel="handleCancel"
      :dialogVisible="dialogVisible"
    >
      <BaseForm
        v-if="dialogVisible"
        type="rule"
        :handleOk="handleOk"
        :handleCancel="handleCancel"
        :items="formItems"
        v-model:form="ruleForm"
        label-width="100px"
        :rules="rules"
        :refresh="getCateList"
      >
      </BaseForm>
    </BaseDialog>
  </div>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus'
import openMsgBox from '@/hooks/messageBox.js'
import store from '@/store'
import { commonService } from '@/api/common'
import { tagService } from '@/api/tag'
const props = defineProps({
  selectItem: {
    type: Object,
  },
  search: {
    type: Function,
  },
  getListFn: {
    type: Function,
  },
  /* 1-用户标签 2-群标签 */
  type: {
    type: String,
  },
  searchParams: {
    type: Object,
  },
})
const filterText = ref('')
const loading = ref(false)
const cateList = ref([])
const currtRow = ref(null)
const dialogVisible = ref(false)
const cateFilterList = ref([])
const filterNode = (val) => {
  cateList.value = cateFilterList.value.filter((e) => {
    return e.categoryName.includes(val)
  })
}
const formItems = ref([
  {
    name: '分类名称',
    key: 'categoryName',
    type: 'input',
  },
  {
    name: '标签属性',
    key: 'nature',
    type: 'radio',
    options: [
      { label: '单选标签', value: 1 },
      { label: '多选标签', value: 2 },
    ],
  },
  {
    name: '排序数字',
    key: 'sort',
    type: 'number',
    placeholder: '请输入排序数字，数字越小越靠前',
    min: 0,
  },
])
const rules = reactive({
  categoryName: [
    { required: true, message: '请输入', trigger: 'change' },
    { max: 255, message: '最长255个字符' },
  ],
  nature: [{ required: true, message: '请选择', trigger: 'change' }],
})
const ruleForm = ref({
  categoryId: '',
  categoryName: '',
  type: props.type,
  sort: ref<number>(),
})
watch(
  () => filterText.value,
  (val) => {
    if (val) {
      filterNode(val)
    } else {
      cateList.value = cateFilterList.value
    }
  }
)
const handleCancel = () => {
  dialogVisible.value = false
}
const handleOk = () => {
  if (ruleForm.value.categoryId) {
    return tagService.updateCategory({
      data: { ...ruleForm.value },
    })
  } else {
    return tagService.addCategory({
      data: {
        ...ruleForm.value,
        type: props.type,
      },
    })
  }
}
const handleEdit = (row) => {
  //currtRow.value = row;
  ruleForm.value = { ...row }
  dialogVisible.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {
      tips: '删除分类后，分类下的内容都将一起删除。已打相关标签数据也将一起删除。确定要删除吗？',
    },
    () => {
      return tagService.delCategory({
        data: row.categoryId,
      })
    },
    () => {
      getCateList()
    }
  )
}
const rowClick = (e) => {
  currtRow.value = e

  props.searchParams.categoryId = e?.categoryId || ''
  props.search()
}

const getCateList = async () => {
  tagService.getCategoryList({ data: { type: props.type } }).then((res) => {
    cateList.value = res.data
    cateFilterList.value = res.data
    if (currtRow.value) {
      const currentData = cateFilterList.value.find(
        (n) => n.categoryId == currtRow.value.categoryId
      )
      console.log('currtRow.value===', currtRow.value)
      if (currentData) {
        nextTick(() => {
          singleTableRef.value.setCurrentRow(currentData)
          rowClick(currentData)
        })
      } else {
        rowClick(null)
      }
    } else {
      rowClick(null)
    }
  })
}

const singleTableRef = ref<InstanceType<typeof ElTable>>()
const setCurrent = (row?) => {
  singleTableRef.value!.setCurrentRow(row)
  rowClick(row)
}
onMounted(() => {
  getCateList()
})
defineExpose({ getCateList, cateList })
</script>

<style lang="scss" scoped>
.cate {
  display: flex;
  flex-direction: column;
  background-color: #ffff;
  width: 270px;
  height: 100%;
  margin-right: 10px;
  border-right: 1px solid #e9e9e9;
  box-sizing: border-box;

  .title {
    padding: 8px 0;
    border-bottom: 1px solid #e9e9e9;
    text-align: center;
  }
}

:deep(.cateTable) {
  flex: 1;

  .el-table__row {
    cursor: pointer;
  }

  thead {
    color: #aaa !important;

    tr > .el-table__cell {
      background-color: #fff !important;
    }
  }
}
</style>
